<template>
  <div class="batch-import-depsoit">
    <div class="title">
      <span>步骤一：上传文件</span>
      <a-button type="link" @click="downloadTemplateHandle">下载模板</a-button>
    </div>
    <div class="upload-content">
      <a-upload-dragger v-model:fileList="formState.fileList" name="file" :customRequest="uploadRequest">
        <p class="ant-upload-drag-icon">
          <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-text">点击上传/ 将文件拖拽到此区域</p>
      </a-upload-dragger>
    </div>
    <div class="title">
      <span>步骤二：数据校验</span>
    </div>
    <a-button @click="dataValidateHandle" size="small">立即校验</a-button>
    <a-spin v-if="step === 2" :spinning="loading">
      <div class="data-content">
        <div class="can-import">
          <div class="title">
            <span>可导入数据:</span>
            <a-button size="small" @click="importDepositHandle">立即导入</a-button>
          </div>
          <vxe-table border :data="validateData.passDepositSummaryList" show-overflow="title" ref="xTable" height="150" :row-config="{ isHover: true }" :scroll-y="{ enabled: true, gt: 20 }">
            <vxe-column field="proceedsAccount" title="收款账户"></vxe-column>
            <vxe-column field="count" title="条数"></vxe-column>
            <vxe-column field="totalPrice" title="总金额"></vxe-column>
          </vxe-table>
        </div>
        <div class="error-import">
          <div class="title">
            <span>不可导入数据:</span>
            <a-button size="small" @click="exportFailDepositHandle">立即导出</a-button>
          </div>
          <vxe-table border :data="validateData.failDepositList" show-overflow="title" ref="xTable" height="200" :row-config="{ isHover: true }" :scroll-y="{ enabled: true, gt: 20 }">
            <vxe-column field="orderNum" title="流水单号"></vxe-column>
            <vxe-column field="failReason" title="导入失败原因"></vxe-column>
            <vxe-column field="companyName" title="客户名称"></vxe-column>
            <vxe-column field="proceedsAccount" title="收款账户"></vxe-column>
            <vxe-column field="depositPrice" title="来款金额"></vxe-column>
          </vxe-table>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { InboxOutlined } from "@ant-design/icons-vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", vis: boolean): void;
  (e: "submit"): void;
}>();
const { visible } = toRefs(props);
const { step, formState, loading, validateData } = InitHook();
const { uploadRequest, dataValidateHandle, downloadTemplateHandle, exportFailDepositHandle, importDepositHandle } = OperationHook({ loading, formState, step, validateData, emit });
watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      step.value = 1;
      formState.fileList = [];
      Object.assign(validateData, { passDepositList: [], failDepositList: [], passDepositSummaryList: [] });
    }
  }
);
</script>
<style lang="stylus" scoped>
.batch-import-depsoit{
    .title{
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .upload-content{
        margin-bottom: 12px;
    }
    .data-content{
        margin-top: 12px;
        .can-import,.error-import{
            margin-bottom: 12px;
            >.title {
                margin-bottom: 12px;
            }
        }
    }


}
</style>
